<template>
  <div class="login">
    <div class="wrapper">
      <div class="header">
        <div @click="go" class="header_left iconfont icon-guanbi"></div>
        <div class="header_center">
          <p v-show="deng">登录</p>
          <p v-show="!deng">注册</p>
        </div>
        <div class="header_right" @click="signIn">
          <p v-show="deng">注册</p>
          <p v-show="!deng">登录</p>
        </div>
      </div>
      <!-- 登录 -->
      <div class="LoginSwitch" v-show="deng">
        <van-tabs v-model="active" swipeable>
          <van-tab :title="'密码登录'">
            <div class="inp">
              手机号<input
                type="text"
                v-model="value"
                placeholder="请输入手机号"
              />
            </div>
            <div class="inp">
              密码<input
                class="ma"
                type="text"
                v-model="password"
                placeholder="请输入密码"
              />
            </div>
          </van-tab>

          <van-tab :title="'手机验证码登录'">
            <div class="inp">
              手机号<input
                type="text"
                v-model="value"
                placeholder="请输入手机号"
              />
            </div>
            <div class="inp">
              短信验证码<input
                type="text"
                v-model="sms"
                placeholder="请输入短信验证码"
              /><button @click="getCode">获取验证码</button>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 注册 -->
      <div class="LoginSwitch" v-show="!deng">
        <div class="inp">
          手机号<input type="text" v-model="value" placeholder="请输入手机号" />
        </div>
        <div class="inp">
          验证码<input
            type="text"
            v-model="sms"
            placeholder="请输入短信验证码"
          /><button @click="getCoded">获取验证码</button>
        </div>
        <div class="inp">
          密码<input
            class="ma"
            type="text"
            v-model="password"
            placeholder="请输入密码"
          />
        </div>
      </div>
      <p class="bgs"></p>
      <div class="btn" @click="submit" v-show="deng"><button>登录</button></div>
      <div class="btn" @click="register" v-show="!deng">
        <button>注册</button>
      </div>
      <div class="logo">
        <img :src="require('../assets/img/5X1.png')" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      sms: "",
      password: "",
      active: 0,
      deng: true,
    };
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    signIn(){
      this.deng = !this.deng
      this.value= ""
      this.sms= ""
      this.password= ""
    },
    // 登录获取验证码
    getCode() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(this.value)) {
        //不正确处理
        this.$toast("验证码发送失败,手机号码错误");
        return;
      } else {
        let token=window.localStorage.getItem("regitertoken")
        if(token){
          this.$toast("验证码发送成功");
        }else{
          this.$toast("您的手机尚未注册，请先注册");
        }
      }
    },
    // 注册获取验证码
    getCoded() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(this.value)) {
        //不正确处理
        this.$toast("验证码发送失败,手机号码错误");
        return;
      } else {
        this.$toast("验证码发送成功");
      }
    },
    submit() {
      // 验证手机号码与密码

      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // 2.验证密码
      if (this.active == 0) {
        let pass = /^[a-zA-Z0-9]\w{8,17}$/;
        if (reg.test(this.value) && pass.test(this.password)) {
          let token=window.localStorage.getItem("regitertoken")
          let userId=window.localStorage.getItem("regiteruserId")
          if(this.value==token ){
            if(this.password==userId){
              window.localStorage.setItem("token", this.value);
              window.localStorage.setItem("userId", this.password);
              this.$toast("登陆成功");
              this.$router.push("/my");
            }else{
              this.$toast("请输入正确手机号码与密码");
            }
          }else{
            this.$toast("手机号未注册");
          }
        } else {
          this.$toast("请输入正确手机号码与密码");
        }
      } else if (this.active == 1) {
        let code = /^[0-9]{4}$/;
        if (reg.test(this.value) && code.test(this.sms)) {
          let token=window.localStorage.getItem("regitertoken")
          if(this.value==token){
            window.localStorage.setItem("token", this.value);
            this.$toast("登陆成功");
            this.$router.push("/my");
          }else{
            if(this.sms==''){

              this.$toast("请输入验证码");
            }else{

              this.$toast("手机号未注册");
            }
          }
        } else {
          this.$toast("验证码错误");
        }
      }
    },
    register() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // 2.验证密码
      let pass = /^[a-zA-Z0-9]\w{8,17}$/;
      let code = /^[0-9]{4}$/;
      if (reg.test(this.value)) {
        if (code.test(this.sms)) {
          if (pass.test(this.password)) {
            window.localStorage.setItem("regitertoken", this.value);
            window.localStorage.setItem("regiteruserId", this.password);
            // if(this.flag==true){
            this.$toast("注册成功，请登录");
            // this.value= ""
            // this.sms= ""
            // this.password= ""
            // this.deng=true
             this.signIn()
            // }else{
            // this.$toast("请同意并选中用户协议以及隐私政策");
            // }
          } else {
            this.$toast("密码八位以上且要包含数字和字母");
          }
        } else {
          this.$toast("请输入正确的验证码");
        }
      } else {
        this.$toast("请输入正确手机号码");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 196, 0));
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    height: 100%;
    background: url(../assets/img/fR.png) center bottom no-repeat;
    background-size: 100%;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
        padding-left: 30px;
      }
      .header_right {
        color: #fc9632;
      }
    }
    .LoginSwitch {
      .van-tabs ::v-deep .van-tabs__line {
        background-color: #fc9632;
        width: 100px;
      }
      .van-tabs ::v-deep .van-tabs__wrap{
        height: 50px;
      }
      .inp {
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        color: rgb(88, 88, 88);
        padding: 0 16px;
        display: flex;
        align-items: center;
        font-size: 14px;
        input {
          flex: 1;
          font-size: 14px;
          padding-left: 30px;
          border: none;
        }
        input.ma {
          padding-left: 43px;
        }
        button {
          height: 30px;
          line-height: 26px;
          font-size: 14px;
          padding: 2px 5px;
          color: #fff;
          background-color: #fc9632;
          border: 0;
          border-radius: 10px;
        }
      }
    }
    .bgs {
      background-color: #fff;
      height: 50px;
      width: 100%;
      border-bottom-left-radius: 50% 50px;
      border-bottom-right-radius: 50% 50px;
    }
    .btn {
      display: flex;
      button {
        width: 330px;
        background-color: #fc9632;
        color: #fff;
        border: none;
        height: 50px;
        margin: 50px auto;
      }
    }
    .logo {
      opacity: 0.8;
      width: 80px;
      position: absolute;
      right: 0;
      left: 0;
      bottom: 80px;
      margin: 0 auto;
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
}
</style>